<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代办任务</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application" style="text-align:center;">
    <form @submit.prevent="addTask">
        <input v-model="taskText" placeholder="请输入任务"/>
        <button type="submit">添加</button>
    </form>
    <ol>
        <li v-for="(item, index) in todos" :key="index">
            {{ item }}
            <button @click="remove(index)">
                删除任务
            </button>
            <hr/>
        </li>
    </ol>
</div>

<script>
    const App = {
        data() {
            return {
                todos: [],
                taskText: ""
            }
        },
        methods: {
            // 添加一条待办任务
            addTask() {
                if (this.taskText.trim().length === 0) { // 使用 trim() 去除空格
                    alert("请添加数据");
                    return;
                }
                this.todos.push(this.taskText); // 直接使用 taskText 的值
                this.taskText = ""; // 清空输入框
            },
            // 删除一条待办任务
            remove(index) {
                this.todos.splice(index, 1);
            }
        }
    };
    Vue.createApp(App).mount('#Application');
</script>

</body>
</html>
